<template>
  <view v-if="!isLoading">
    <view class="course_box">
      <view class="store_tit">
        {{order.course.name}}
        <text class="yz-iconfont yz-jiantou3"></text>
      </view>
      <view class="course_detail" @tap="$xyfun.to('/pages/course/detail?id='+order.course_id)">
        <image class="thumb" :src="$xyfun.image(order.image)" mode="widthFix"></image>
        <view class="cont">
          <view :class="'ctype '+order.type+'_ctype_color'">{{order.type_text}}</view>
          <view class="tit">{{order.course.name}}</view>
          <view class="tags" v-if="course.tags!==''">
            <view class="item" v-for="(z,x) in $xyfun.splitTags(course.tags)">{{z}}</view>
          </view>
        </view>
        <view class="buy">
          <view class="price">￥{{course.price}}</view>
          <view class="line_price">￥{{course.line_price}}</view>
          <view class="num">x{{order.buy_num}}</view>
        </view>
      </view>
    </view>
    <view class="order_body">
      <view class="o_item">
        <view class="o_l">总时长</view>
        <view class="o_r">{{course.duration}}分钟</view>
      </view>
      <view class="o_item">
        <view class="o_l">数量</view>
        <view class="o_r">{{order.buy_num}}节</view>
      </view>
      <view class="o_item">
        <view class="o_l">权益抵扣数量</view>
        <view class="o_r">{{order.ext_arr.benfit_num}}节</view>
      </view>
    </view>
    <view class="order_body">
      <view class="o_item">
        <view class="o_l">总金额</view>
        <view class="o_r">￥{{order.total_amount}}</view>
      </view>
      <view class="o_item">
        <view class="o_l">实际支付</view>
        <view class="o_r">￥{{order.total_fee}}</view>
      </view>
      <view class="o_item">
        <view class="o_l">支付方式</view>
        <view class="o_r">{{order.pay_type_text}}</view>
      </view>
      <view class="o_item">
        <view class="o_l">下单时间</view>
        <view class="o_r">{{$xyfun.timeFormat(order.createtime)}}</view>
      </view>
      <view class="o_item">
        <view class="o_l">订单号</view>
        <view class="o_r">{{order.order_sn}}</view>
      </view>
      <view class="o_item">
        <view class="o_l">订单状态</view>
        <view class="o_r">{{order.status_text}}</view>
      </view>
      <view class="o_item" v-if="order.remark">
        <view class="o_l">备注</view>
        <view class="o_r">{{order.remark}}</view>
      </view>
    </view>
    <view class="order_act">
      <view class="but" v-if="order.status==1" @tap="drawQrCode">核销</view>
      <view class="but" @tap="second_buy">再次预约</view>
    </view>

    <!--核销码弹窗-->
    <block>
      <view class="xy-modal-box xy-modal-box-center qrcode-model-box p-tb-20 p-lr-30 br-10 bg-w" :class="[verifyCodeModelShow?'xy-modal-show':'']">
        <view class="verify_code">
          <image class="image" :src="qrcodepath"></image>
          <view class="m-t-30 tc">消课码</view>
        </view>
      </view>
      <view class="xy-modal-mask" :class="[verifyCodeModelShow?'xy-mask-show':'']" @tap="closeQrCode()"></view>
    </block>

    <!-- 二维码绘制 -->
    <view class="hide-canvas">
      <canvas canvas-id="qrcode" style="width: 300px;height: 300px;"></canvas>
    </view>

  </view>
</template>

<script>
  import { mapState } from 'vuex';
  import xyOrderItem from "@/components/xy-order/item.vue";
  import uQRCode from '@/utils/uqrcode';
  export default {
    components: {
      xyOrderItem
    },
    data() {
      return {
        id: '',
        order:{},
        course:{},
        isLoading:true,
        verifyCodeModelShow:false,
        qrcodepath: '',
        intervalId : ''
      }
    },
    computed: {
      ...mapState(['common','user'])
    },
    async onLoad() {
      var options = this.$Route.query;
      if(options){
        this.id = options.id;
      }
      this.loadData();

    },
    onHide(){
      clearInterval(this.intervalId);
    },
    onUnload() {
      clearInterval(this.intervalId);
    },
    methods: {
      async loadData(){
        this.$api.post({
          url: '/course_order/detail',
          loadingTip:'加载中...',
          data: {
            id: this.id,
          },
          success: res => {
            this.order = res;
            this.course = res.course;
            this.isLoading = false;
          }
        });
      },
      //再次预约
      second_buy(){
        this.$xyfun.to('/pages/course_list');
      },
      //去核销
      async drawQrCode() {
        var that = this;
        uQRCode.make({
          canvasId: 'qrcode',
          text: this.order.order_sn,
          size: 300,
          success: res => {
            this.qrcodepath = res;
          }
        });
        this.verifyCodeModelShow = true;
        this.intervalId = setInterval(function(){
          that.$api.post({
            url: '/course_order/getStatus',
            loadingTip:'加载中...',
            data: {
              order_id: that.order.id,
            },
            success: res => {
              if(res==2){
                that.verifyCodeModelShow = false;
                that.loadData()
                that.$xyfun.msg('核销成功',4000);
                clearInterval(that.intervalId);
              }
            }
          })
        },500)
      },

      //关闭核销码
      closeQrCode(){
        clearInterval(this.intervalId);
        this.verifyCodeModelShow = false;
      },


    }
  }
</script>

<style>
page{
  background: #f5f5f5;
  padding-bottom: 100rpx;
}
</style>
<style scoped lang="scss">
.course_box{
  background: #fff;
  padding: 20rpx;
  margin: 26rpx;
  border-radius: 10rpx;
}
.store_tit{
  font-size: 28rpx;
  margin-bottom: 24rpx;
  border-left: 8rpx solid #FF5722;
  padding-left: 20rpx;
  .yz-iconfont{
    font-size: 18rpx;
    margin-left: 20rpx;
    vertical-align: middle;
  }
}
.course_detail{
  display: flex;
  justify-content: space-between;
  .buy{
    margin-left: 20rpx;
    text-align: right;
    .num{
      font-size: 26rpx;
      margin-top: 34rpx;
    }
    .line_price{
      text-decoration: line-through;
      font-size: 22rpx;
    }
  }
  .cont{
    margin-left: 26rpx;
    flex-grow: 1;
    .ctype{
      //color: #fff;
      //background: #FF9800;
      width: 100rpx;
      font-size: 24rpx;
      border-radius: 10rpx;
      text-align: center;
    }
    .tags{
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      margin-top: 15rpx;
      font-size: 24rpx;
      .item{
        margin-bottom: 6rpx;
        border-radius: 4rpx;
        font-size: 20rpx;
        background: #eeeeee;
        margin-right: 6rpx;
        padding: 4rpx 8rpx;
        color: #000;
      }
    }
    .tit{
      margin-top: 20rpx;
      color: #000;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
  .thumb{
    width: 240rpx;
    border-radius: 10rpx;
  }
}
.order_body{
  padding: 10rpx 26rpx;
  background: #fff;
  border-radius: 10rpx;
  margin: 26rpx;
  .o_item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10rpx 0;
    padding: 14rpx 0;
    border-bottom: 2rpx solid #f1f1f1;
    line-height: 34rpx;
    .o_l{
      font-size: 26rpx;
      min-width: 200rpx;
    }
    .o_r{
      font-size: 26rpx;
      color: #3b3b3b;
    }
    &:last-child{
      border: none;
    }
  }
}

.price{
  color: #FF5722 !important;
  font-weight: bold;
  font-size: 34rpx !important;
}
.verify_code .image{
  width: 300rpx;
  height: 300rpx;
}

</style>
